//$(function(){})全局加载完毕执行js代码
$(function () {
    // 1.全选 全不选功能模块
    // 就是把全选按钮 的状态赋值给三个小的按钮 
    $('.checkall').change(function () {
        $('.j-checkbox, .checkall').prop('checked', $(this).prop('checked'))
        // .check-cart-item
        // cart-item
        // 如果当前全选按钮的checked状态为true
        if ($(this).prop('checked')) {
            // 则就给商品添加有背景颜色样式的类
            $('.cart-item').addClass('check-cart-item')
        } else {
            // 否则就溢出样式类
            $('.cart-item').removeClass('check-cart-item')
        }
    })
    // 2.商品如果全部被选中则选中全选按钮 反之不选全选按钮
    // :checked选择器可以选择出 所有处于被选中的状态的checkbox 
    // 由此检测到底有几个商品被选中
    $('.j-checkbox').change(function () {
        // 如果被选中的商品个数全等于商品总个数
        if ($('.j-checkbox:checked').length == $('.j-checkbox').length) {
            // 则全选按钮被选中
            $('.checkall').prop('checked', true)
        } else {
            // 否则全选按钮不选中
            $('.checkall').prop('checked', false)
        }
        if ($(this).prop('checked')) {
            $(this).parents('.cart-item').addClass('check-cart-item')
        } else {
            $(this).parents('.cart-item').removeClass('check-cart-item')

        }
    })
    // 3.增减商品数量模块 首先声明一个变量 当我们点击+号 就让这个值++ 然后赋值给文本框
    $('.increment').click(function () {
        // 拿到当前+号兄弟级元素itxt的value值
        var n = $(this).siblings('.itxt').val()
        n++
        // 每点击一一次就自让当前兄弟级元素itxt的value值加1
        $(this).siblings('.itxt').val(n)
        // 4.计算模块 根据文本框的值乘以 当前商品的价格 就是商品的小计
        // 获取当前元素的祖先p-num的兄弟级p-priceh 内容
        var p = $(this).parents('.p-num').siblings('.p-price').html()
        // console.log(p);
        //   截取￥符号
        p = p.substr(1)
        // toFixed()保留n未小数 自定义
        var price = (p * n).toFixed(2)
        // 给当前元素的祖先元素p-num的兄弟级p-sum 赋值商品小计 parents()祖先选择器
        $(this).parents('.p-num').siblings('.p-sum').html('￥' + price)
        getSum()
    })
    $('.decrement').click(function () {
        // 拿到当前+号兄弟级元素itxt的value值保存到n
        var n = $(this).siblings('.itxt').val()
        // 如果当前元素兄弟元素itxt value值等于1 n==1 就不在执行自减和赋值操作
        if (n == 1) {
            // 后面程序不在执行
            return false
        }
        n--
        // 每点击一一次就自让当前兄弟级元素itxt的value值减一
        $(this).siblings('.itxt').val(n)
        var p = $(this).parents('.p-num').siblings('.p-price').html()
        // console.log(p);
        //   截取￥符号
        p = p.substr(1)//substr第1个参数从哪开始截取 第二个参数截取到什么位置 如果不写就一直截取到最后

        // 给当前元素的父的父的兄弟p-sum 赋值商品小计
        $(this).parents('.p-num').siblings('.p-sum').html('￥' + (n * p).toFixed(2))//
        getSum()

    })
    // 5.通过change事件检测表单的内容 以防用户手动输入购买数量
    $('.itxt').change(function () {
        var n = $(this).val()
        var p = $(this).parents('.p-num').siblings('.p-price').html()
        p = p.substr(1)
        $(this).parents('.p-num').siblings('.p-sum').html('￥' + (n * p).toFixed(2))
        getSum()

    })
    // 6.计算总数 和总额
    function getSum() {
        var count = 0
        var money = 0
        // +/-/手动输入这三种修改数量的途径都会影响总数量 所以这三个事件都需要调用这个计算总数函数
        $('.itxt').each(function (i, ele) {
            count += parseInt($(ele).val())
        })
        $('.amount-sum em ').text(count)
        $('.p-sum').each(function (i, ele) {
            money += parseFloat($(ele).text().substr(1))
        })
        $('.price-sum em').text('￥' + money.toFixed(2))
    }
    // 7.删除模块  
    // 在给元素进行相同的操作时可以考虑利用隐士迭代
    // jquery里通过$符合获取过来的元素都存在隐士迭代：会把匹配的dom元素内部遍历循环
    $('.p-action a').click(function () {
        // 每次点击当前的删除按钮就让他对应的商品删除
        $(this).parents('.cart-item').remove()
        // 每次删除后都需要重新计算总数和总额所有需要重新调用一次计算函数
        getSum()

    })
    $('.remove-batch').click(function () {
        //:checked选择器：会选择出 所有被选中（状态为true）的checkbox。
        $('.j-checkbox:checked').parents('.cart-item').remove()//然后删除所有状态为true的复选框对应的商品
        // 每次删除后都需要重新计算总数和总额所有需要重新调用一次计算函数
        getSum()
    })
    $('.clear-all').click(function () {
        // 删除所有商品
        $('.cart-item').remove()
        // 每次删除后都需要重新计算总数和总额所有需要重新调用一次计算函数
        getSum()
    })

})